<template>
	<view class="content">
		<view class="bigBox">
				<view class="topBox">
					<input class="codeInput" type="text" v-model="codeVal" placeholder="输入兑换码" />
					<button class="codeBtn" @click="exchange">兑换</button>
				</view>
				<view class="couponBox">
					<!-- <view class="coupon">
						<view class="subscript">
							piece动画会员
						</view>
						<span class="moneyBox">
							<text class="t1">￥</text>
							<span class="money2">
								<text class="t2">20</text>
								<text class="t3">满20.011可用</text>
							</span>
						</span>
						<span class="couponName">
							<text class="couponNameText">优惠券名称</text>
							<view class="line"></view>
							<text class="t4">有效期至2024.12.31</text>
						</span>
						<span class="useCoupon" @click="goto('vip')">
							<text>去使用</text>
						</span>
					</view> -->
					<view class="coupon" v-for="couponItem in couponList">
						<view class="subscript">
							{{"piece动画会员"}}
						</view>
						<span class="moneyBox">
							<text class="t1">￥</text>
							<span class="money2">
								<text class="t2">{{couponItem.money/100}}</text>
							</span>
						</span>
						<span class="couponName">
							<text class="couponNameText">{{couponItem.title}}</text>
							<view class="line"></view>
							<text class="t4">{{"有效期至"+todate(couponItem.endtime)}}</text>
						</span>
						<span class="useCoupon" @click="goto('vip')">
							<text>去使用</text>
						</span>
					</view>
				</view>
				<view class="downloadView">
					<!-- <button @click="openDownload">下载app</button> -->
					<text>
					  {{`到“piece动画”抖音主页，点击下载应用
					  使用优惠券开通会员吧。`}}
					</text>

				</view>
				
				<!-- 提示窗示例 -->
				<uni-popup ref="alertDialog" type="dialog">
					<view class="dialogView">
						<text>兑换码错误，请到“piece动画主页→商家→优惠券”点击领取兑换码</text>
						<button @click="close">再等等</button>
						<button id="downloadBtn" open-type="openAwemeUserProfile" bindopenawemeuserprofile=""
							data-aweme-id="54569746471">
							去领取
						</button>
					</view>
				
				</uni-popup>
				
		</view>
		<Menu style="width: 100%;"></Menu>
	</view>
</template>

<script>
	import {
		setInfo,
		parseUserData
	} from '../../hook/auth.js'
	import api from '../../api/api.js'
	import Menu from "../components/menu.vue"
	export default {
		components:{Menu},
		data() {
			return {
				codeVal: "", //用户输入的券码
				userData: {}, //用户信息
				couponList: [], //券列表
			}
		},
		methods: {
			close() {
				this.$refs.alertDialog.close()
			},
			//路由跳转
			goto(title) {
				console.log('路由跳转',title)
				let url = ""
				if(title=="vip"){
					url = "/pages/index/vip"	
				}
				uni.navigateTo({
					url: url
				})
			},
			//时间戳转换
			todate(time){
				const date = new Date(time)
				// 获取年、月、日
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从 0 开始，所以要加 1
				const day = date.getDate();
				
				// 可以按需将年、月、日组合成不同格式的日期字符串
				return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
			},
			//兑换优惠券
			exchange() {
				const self = this
				if(!self.codeVal)self.$refs.alertDialog.open();
				api.userCoupon({
					"uid": self.userData.id,
					"auth_token": self.userData.auth_token,
					"channel": "douyinApplet",
					"channel_id": 7,
					"spec": {
						"code": self.codeVal
					}
				}).then(res => {
					console.log("兑换优惠券", res)
					if(res.code==200){
						self.getCouponList()
						uni.showToast({
							title:msg
						})
					}else{
						self.$refs.alertDialog.open()
					}
					
				})
			},
			//下载app
			openDownload(){
				api.get("https://apps.bytesfield.com/download/basic/cur/b284f7066bbe03fbcf34196293794fac1d21e685")
			},
			//获取券列表
			getCouponList() {
				const self = this
				api.couponList({
					"uid": self.userData.id,
					"auth_token": self.userData.auth_token,
					"channel": "douyinApplet",
					"channel_id": 7
				}).then(res => {
					console.log("获取券列表", res)
					if(res.code ==200){
						self.couponList = res.data
					}
				})
			},
		},

		mounted() {
			this.userData = parseUserData()
			this.getCouponList()
		}
	}
</script>

<style scoped>
	#downloadBtn {
		background: rgba(18, 205, 217, 1);
		color: rgba(255, 255, 255, 1);
	}
	
	.dialogView button {
		display: inline-block;
		width: 100px;
		height: 38px;
		opacity: 1;
		border-radius: 54.5px;
		background: rgba(234, 234, 234, 1);
		margin: 20px;
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 1px;
		line-height: 38px;
		color: rgba(128, 128, 128, 1);
		text-align: center;
		vertical-align: top;
	
	}
	
	.dialogView text {
		display: block;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 28px;
		color: rgba(229, 229, 229, 1);
	}
	
	.dialogView {
		display: block;
		width: calc(100vw - 40px);
		box-sizing: border-box;
		padding: 20px 0;
		border-radius: 16px;
		background: linear-gradient(178.74deg, rgba(61, 62, 66, 1) 0%, rgba(18, 19, 26, 1) 100%);
		text-align: center;
	}
	.useCoupon text {
		font-size: 20px;
		font-weight: 400;
		line-height: 29px;
		color: rgba(218, 177, 111, 1);
		vertical-align: sub;
	}

	.useCoupon {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 45px;
		box-sizing: border-box;
		padding: 0 4px;
		border-radius: 0px 10px 10px 0px;
		background: rgba(255, 255, 255, 1);
		text-align: center;
		vertical-align: middle;
	}

	.line {
		width: 100%;
		height: 0;
		border: 0px;
		margin: 6px 0;
		border-top: 1px solid rgba(218, 177, 111, 1);
	}

	.t4 {
		font-size: 10px;
		font-weight: 400;
		color: rgba(218, 177, 111, 1);
		vertical-align: top;
	}

	.couponNameText {
		font-size: 24px;
		font-weight: 500;
		color: rgba(218, 177, 111, 1);
	}

	.couponName {
		position: absolute;
		right: 60px;
		top: 50%;
		text-align: center;
		transform: translateY(-50%);
	}

	.t2 {
		text-shadow: inset 0px 0.86px 1.73px rgba(196, 150, 75, 1);
		font-size: 50px;
		font-weight: 600;
	}

	.t3 {
		font-size: 12px;
		font-weight: 400;
		display: block;
		margin-top: -14px;
		text-align: center;
	}

	.money2 {
		position: absolute;
		color: rgba(225, 186, 123, 1);
		margin-top: -6px;
	}

	.moneyBox {
		position: relative;
		display: block;
		width: 40%;
		height: 94px;
		margin-top: -10px;
		margin-left: 10px;
		line-height: 94px;
		opacity: 1;
		vertical-align: middle;
	}

	.t1 {
		text-shadow: inset 0px 0.86px 1.73px rgba(196, 150, 75, 1);
		font-size: 27px;
		font-weight: 600;
		color: rgba(225, 186, 123, 1);
		line-height: 94px;
		vertical-align: middle;
	}

	.subscript {
		left: 13px;
		top: 160px;
		width: 78px;
		height: 20px;
		opacity: 1;
		border-radius: 10px 0px 11.96px 0px;
		background: linear-gradient(131.55deg, rgba(232, 51, 51, 1) 0%, rgba(252, 126, 63, 1) 100%);

		font-size: 10px;
		line-height: 20px;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		vertical-align: middle;
	}

	.coupon {
		position: relative;
		width: 100%;
		height: 110px;
		margin-top: 10px;
		opacity: 1;
		border-radius: 10px;
		background: linear-gradient(90deg, rgba(253, 252, 251, 1) 0%, rgba(226, 209, 195, 1) 100%);
	}

	.couponBox {
		width: 100%;
		box-sizing: border-box;
		height: calc(100vh - 80px);
		overflow-y: auto;
	}

	.bigBox {
		width: 94%;
		margin: 0 auto;
		position: relative;
	}

	.topBox {
		width: 100%;
		height: 40px;
		overflow: hidden;
		margin: 0 auto;
		margin-top: 10px;
	}

	.codeBtn {
		display: inline-block;
		width: 20%;
		height: 38px;
		border-radius: 36.5px;
		background: rgba(18, 205, 217, 1);
		font-size: 15px;
		font-weight: 400;
		line-height: 38px;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		vertical-align: top;
		box-sizing: border-box;
	}

	.codeInput {
		display: inline-block;
		color: aliceblue;
		width: 78%;
		margin-right: 2%;
		height: 40px;
		font-size: 12px;
		padding: 0 4px;
		border-radius: 10px;
		box-sizing: border-box;
		border: 1px solid rgba(128, 128, 128, 1);
	}

	.downloadView text {
		width: 100%;
		height: 56px;
		font-size: 16px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.downloadView {
		position: fixed;
		text-align: center;
		bottom: 90px;
		left: 50%;
		transform: translateX(-50%);
		width: 94%;
	}

	.content {
		width: 100%;
		height: 100vh;
		background: rgba(34, 34, 34, 1);
		overflow-x: hidden;
	}
</style>